<template>
  <view class="container">
    <view class="card">
      <view class="card-header">
        <view class="title">保洁预约详情</view>
        <view class="status">
          <u-tag
            :text="getStatusText(bookingDetail.status)"
            :type="getStatusType(bookingDetail.status)"
            size="mini"
          ></u-tag>
        </view>
      </view>
      
      <view class="info-section">
        <view class="info-item">
          <view class="label">预约单号</view>
          <view class="value">#{{ bookingDetail.booking_id }}</view>
        </view>
        
        <view class="info-item">
          <view class="label">预约单元</view>
          <view class="value">{{ bookingDetail.unit_info ? bookingDetail.unit_info.unit_number : '' }}</view>
        </view>
        
        <view class="info-item">
          <view class="label">预约日期</view>
          <view class="value">{{ bookingDetail.expected_service_date }}</view>
        </view>
        
        <view class="info-item">
          <view class="label">预约时段</view>
          <view class="value">{{ bookingDetail.expected_time_slot }}</view>
        </view>
        
        <view class="info-item">
          <view class="label">申请时间</view>
          <view class="value">{{ formatDateTime(bookingDetail.application_time) }}</view>
        </view>
        
        <view class="info-item" v-if="bookingDetail.handler_info">
          <view class="label">保洁人员</view>
          <view class="value">{{ bookingDetail.handler_info.name }}</view>
        </view>
        
        <view class="info-item" v-if="bookingDetail.completion_time">
          <view class="label">完成时间</view>
          <view class="value">{{ formatDateTime(bookingDetail.completion_time) }}</view>
        </view>
        
        <view class="info-item" v-if="bookingDetail.service_fee">
          <view class="label">服务费用</view>
          <view class="value">¥{{ bookingDetail.service_fee }}</view>
        </view>
      </view>
      
      <!-- 特殊要求 -->
      <view class="req-section" v-if="bookingDetail.special_requirements">
        <view class="section-title">特殊要求</view>
        <view class="req-content">{{ bookingDetail.special_requirements }}</view>
      </view>
      
      <!-- 评价 -->
      <view class="review-section" v-if="bookingDetail.status === 'reviewed'">
        <view class="section-title">我的评价</view>
        <view class="rating">
          <u-rate :value="bookingDetail.rating" disabled></u-rate>
        </view>
        <view class="review-content" v-if="bookingDetail.review_content">
          {{ bookingDetail.review_content }}
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="btn-wrapper" v-if="['pending', 'accepted'].includes(bookingDetail.status)">
      <u-button type="error" text="取消预约" @click="handleCancel"></u-button>
    </view>
    
    <view class="btn-wrapper" v-if="bookingDetail.status === 'completed'">
      <u-button type="primary" text="评价服务" @click="goRate"></u-button>
    </view>
    
    <!-- 取消预约确认弹窗 -->
    <u-modal
      :show="showCancelModal"
      title="取消预约确认"
      content="确定要取消该保洁预约吗？"
      @confirm="confirmCancel"
      @cancel="showCancelModal = false"
    ></u-modal>
  </view>
</template>

<script>
import { getCleaningBookingDetail, cancelCleaningBooking } from '@/api/services'

export default {
  data() {
    return {
      bookingId: null,
      bookingDetail: {},
      showCancelModal: false
    }
  },
  onLoad(options) {
    if (options.id) {
      this.bookingId = options.id
      this.loadBookingDetail()
    } else {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  },
  methods: {
    // 加载预约详情
    loadBookingDetail() {
      uni.showLoading({ title: '加载中...' })
      
      getCleaningBookingDetail(this.bookingId)
        .then(res => {
          this.bookingDetail = res.data || {}
        })
        .catch(err => {
          uni.showToast({
            title: '加载失败：' + err.message,
            icon: 'none'
          })
        })
        .finally(() => {
          uni.hideLoading()
        })
    },
    
    // 处理取消预约
    handleCancel() {
      this.showCancelModal = true
    },
    
    // 确认取消预约
    confirmCancel() {
      uni.showLoading({ title: '取消中...' })
      
      cancelCleaningBooking(this.bookingId)
        .then(() => {
          uni.showToast({
            title: '预约已取消',
            icon: 'success'
          })
          
          // 刷新数据
          setTimeout(() => {
            this.loadBookingDetail()
          }, 1500)
        })
        .catch(err => {
          uni.showToast({
            title: '取消失败：' + err.message,
            icon: 'none'
          })
        })
        .finally(() => {
          uni.hideLoading()
          this.showCancelModal = false
        })
    },
    
    // 前往评价页面
    goRate() {
      uni.navigateTo({
        url: `/pages/services/cleaning/rate?id=${this.bookingId}`
      })
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'pending': '待受理',
        'accepted': '已受理',
        'in_progress': '服务中',
        'completed': '已完成',
        'reviewed': '已评价',
        'cancelled': '已取消'
      }
      return statusMap[status] || status
    },
    
    // 获取状态标签类型
    getStatusType(status) {
      const typeMap = {
        'pending': 'warning',
        'accepted': 'primary',
        'in_progress': 'primary',
        'completed': 'success',
        'reviewed': 'success',
        'cancelled': 'error'
      }
      return typeMap[status] || 'primary'
    },
    
    // 格式化日期时间
    formatDateTime(dateTimeStr) {
      if (!dateTimeStr) return ''
      const date = new Date(dateTimeStr)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  padding-bottom: 150rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.info-section {
  margin-bottom: 30rpx;
}

.info-item {
  display: flex;
  margin-bottom: 16rpx;
}

.label {
  width: 180rpx;
  color: #666;
  font-size: 28rpx;
}

.value {
  flex: 1;
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
  position: relative;
  padding-left: 20rpx;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6rpx;
  height: 28rpx;
  width: 6rpx;
  background-color: #3c9cff;
  border-radius: 3rpx;
}

.req-section {
  padding: 20rpx 0;
  border-top: 1px solid #f2f2f2;
  margin-bottom: 20rpx;
}

.req-content {
  color: #666;
  font-size: 28rpx;
  line-height: 1.5;
}

.review-section {
  padding: 20rpx 0;
  border-top: 1px solid #f2f2f2;
}

.rating {
  margin-bottom: 16rpx;
}

.review-content {
  color: #666;
  font-size: 28rpx;
  line-height: 1.5;
}

.btn-wrapper {
  padding: 30rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style> 